import React, {useState} from 'react';
import style from './indexMainHeader.module.css'
import {Avatar, Row, Col, Button, Space, message} from 'antd';
import {
    PictureTwoTone, SendOutlined
} from '@ant-design/icons';
import {PostMessage} from '../postComponent/index'
const IndexMainHeader = () => {
    const [isShow,changeIsShow]=useState(false)
    const avatar = JSON.parse(localStorage.getItem("USERDATA"))?.avatar;
    const handleShowPostMessage=()=>{
        const token = localStorage.getItem('TOKEN')
        if(token)
            changeIsShow(true)
        else message.info('请先登录')
    }
    return (
        <div className={`${style.body}`}>
            <h2>分享一下</h2>
            <Avatar src={avatar} ></Avatar>
            <p className={`${style.title}`} onClick={handleShowPostMessage}>
                今天你开摆了吗？
            </p>
            <PostMessage show={isShow} changeShow={(value)=>changeIsShow(value)}/>
            <div className={`${style.bodyBottom}`}>
                <Row>
                    <Col span={8}>
                        <Space>
                            <PictureTwoTone />
                        </Space>
                    </Col>
                    <Col span={8} offset={8}>
                        <Button type="primary" icon={<SendOutlined />} shape="round" style={{float:'right',opacity:0.5}}>
                            发送
                        </Button>
                    </Col>
                </Row>
            </div>
        </div>
    );
}

export default IndexMainHeader;
